<script setup>
import { ref } from 'vue'
import { 
  Search, 
  ArrowLeft, 
  Setting,
  Microphone
} from '@element-plus/icons-vue'
import StatusBar from './components/StatusBar.vue'

const searchQuery = ref('')

// All cards using the same purple gradient as shown in the image
const defaultGradient = 'linear-gradient(to bottom, #9349F0, #7E31D0)';

const categories = [
  { title: '全部歌曲', count: '3425', subtitle: '共', iconClass: 'icon-headphones', bgGradient: defaultGradient },
  { title: '男生歌曲', count: '1253', subtitle: '', iconClass: 'icon-headphones', bgGradient: defaultGradient },
  { title: '女生歌曲', count: '1486', subtitle: '', iconClass: 'icon-mic', bgGradient: defaultGradient },
  { title: '粤语歌曲', count: '586', subtitle: '', iconClass: 'icon-headphones', bgGradient: defaultGradient },
  { title: '闽南歌曲', count: '328', subtitle: '', iconClass: 'icon-headphones', bgGradient: defaultGradient },
  { title: '英语歌曲', count: '892', subtitle: '', iconClass: 'icon-headphones', bgGradient: defaultGradient },
  { title: '我的收藏', count: '68', subtitle: '', iconClass: 'icon-star', bgGradient: defaultGradient },
  { title: '我的足迹', count: '125', subtitle: '', iconClass: 'icon-clock', bgGradient: defaultGradient }
]
</script>

<template>
  <div class="app-container">
    <StatusBar />
    <header class="header">
      <div class="back-button">
        <el-icon><arrow-left /></el-icon>
      </div>
      <div class="title">音乐分类</div>
      <div class="settings">
        <el-icon><setting /></el-icon>
      </div>
    </header>
    
    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="搜索歌曲、歌手"
        :prefix-icon="Search"
      >
        <template #suffix>
          <el-icon class="mic-icon"><microphone /></el-icon>
        </template>
      </el-input>
    </div>
    
    <div class="category-grid">
      <div 
        v-for="(category, index) in categories" 
        :key="index" 
        class="category-card"
        :style="{ background: category.bgGradient }"
      >
        <div class="category-icon">
          <i :class="category.iconClass"></i>
        </div>
        
        <div class="category-bottom">
          <div class="category-title">{{ category.title }}</div>
          <div class="category-count">{{ category.subtitle }}{{ category.count }}首</div>
        </div>
      </div>
    </div>
    
    <div class="home-indicator"></div>
  </div>
</template>

<style scoped>
.app-container {
  width: 100%;
  height: 100vh;
  background-color: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  justify-content: space-between;
}

.back-button {
  font-size: 24px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.settings {
  font-size: 20px;
}

.search-bar {
  margin: 0 16px 16px;
}

:deep(.el-input__wrapper) {
  background-color: #222;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
}

:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-input__prefix-inner .el-icon) {
  color: #999;
}

.mic-icon {
  color: #999;
  font-size: 18px;
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 16px;
}

.category-card {
  border-radius: 12px;
  padding: 16px;
  color: white;
  position: relative;
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.category-icon {
  margin-bottom: auto;
}

.category-icon i {
  font-size: 24px;
  color: white;
}

.category-bottom {
  display: flex;
  flex-direction: column;
}

.category-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.home-indicator {
  width: 134px;
  height: 5px;
  background-color: #fff;
  border-radius: 2.5px;
  margin: 8px auto 16px;
}
</style>
